<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            width: 180px;
        }
        ul li {
            width: 30px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="list"></ul>
    </div>
</body>
<script>
    let stack = []
    // 生成dom
    const list = document.getElementById('list')
    let arr = []
    let pathNum = []
    for(let i = 0; i<36; i++) {
        if(i === 0) {
            arr.push('<li x="0" y="0">1</li>')
            pathNum.push(1)
        } else {
            let j = Math.random() > 0.5 ? 1 : 0
            pathNum.push(j)
            arr.push(`<li x="${i % 6}" y="${Math.floor(i/6)}">${j}</li>`)
        }
    }
    list.innerHTML = arr.join('')
    let liList = document.getElementsByTagName("li")

    // 根据点获取数组中的下标
    function getIndex(x, y) {
        return y * 6 + x
    }
    // 判断一个元素能否走
    // 上下左右
    function checkDot(x, y) {
        if(pathNum[getIndex(x, y-1)] === 1) {
            return {x, y: y-1}
        } 
        // if(getIndex(x, y-1) || getIndex(x + 1, y) || getIndex(x, y+1) || getIndex(x - 1, y)) {
        //     console.log('入栈')
        //     liList[getIndex(x, y)].setAttribute('flag', 1) // 已入栈
        //     stack.push({x, y})
        // } else {
        //     // 不能走
        //     liList[getIndex(x, y)].setAttribute('flag', 2) // 不可入栈
        // }
    }
    checkDot(0, 0)


</script>
</html>